{% extends "pretixcontrol/items/base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% load formset_tags %}
{% load escapejson %}
{% block title %}
    {% if question %}
        {% blocktrans with name=question.question %}Question: {{ name }}{% endblocktrans %}
    {% else %}
        {% trans "Question" %}
    {% endif %}
{% endblock %}
{% block inside %}
    <nav id="event-nav" class="header-nav">
        <div class="navigation">
            <div class="navigation-title">
                {% if question %}
                    <h1>{% blocktrans with name=question.question %}Question: {{ name }}{% endblocktrans %}</h1>
                {% else %}
                    <h1>{% trans "Question" %}</h1>
                {% endif %}
            </div>
            {% include "pretixcontrol/event/component_link.html" %}
        </div>
    </nav>
    <form action="" method="post" class="form-horizontal">
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        <div class="tabbed-form">
            <fieldset>
                <legend>{% trans "General" %}</legend>
                {% bootstrap_field form.question layout="control" %}
                {% bootstrap_field form.type layout="control" %}
                {% bootstrap_field form.products layout="control" %}
                {% bootstrap_field form.required layout="control" %}
                <div class="alert alert-info alert-required-boolean">
                    {% blocktrans trimmed %}
                    If a Confirm Checkbox is marked as required, the user must check it to proceed.
                    To allow the user to leave it unchecked, do not set the field as required.
                    {% endblocktrans %}
                </div>
                <div id="valid-number">
                    {% bootstrap_field form.valid_number_min layout="control" %}
                    {% bootstrap_field form.valid_number_max layout="control" %}
                </div>
                <div id="valid-date">
                    {% bootstrap_field form.valid_date_min layout="control" %}
                    {% bootstrap_field form.valid_date_max layout="control" %}
                </div>
                <div id="valid-datetime">
                    {% bootstrap_field form.valid_datetime_min layout="control" %}
                    {% bootstrap_field form.valid_datetime_max layout="control" %}
                </div>
                <div id="answer-options">
                    <h3>{% trans "Answer options" %}</h3>
                    <noscript>
                        <p>{% trans "Only applicable if you choose 'Choose one/multiple from a list' above." %}</p>
                    </noscript>
                    <div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
                        {{ formset.management_form }}
                        {% bootstrap_formset_errors formset %}
                        <div data-formset-body>
                            {% for form in formset %}
                                <div data-formset-form>
                                    <div class="sr-only">
                                        {{ form.id }}
                                        {% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
                                        {% bootstrap_field form.ORDER form_group_class="" layout="inline" %}
                                    </div>
                                    <div class="row question-option-row">
                                        <div class="col-xs-10">
                                    <span class="text-muted">
                                        {% blocktrans trimmed with id=form.instance.identifier %}
                                            Answer option {{ id }}
                                        {% endblocktrans %}
                                    </span>
                                            {% bootstrap_form_errors form %}
                                            {% bootstrap_field form.answer layout='inline' form_group_class="" %}
                                        </div>
                                        <div class="col-xs-2 text-right flip">
                                            <span>&nbsp;</span><br>
                                            <button type="button" class="btn btn-default" data-formset-move-up-button>
                                                <i class="fa fa-arrow-up"></i></button>
                                            <button type="button" class="btn btn-default" data-formset-move-down-button>
                                                <i class="fa fa-arrow-down"></i></button>
                                            <button type="button" class="btn btn-delete btn-danger" data-formset-delete-button>
                                                <i class="fa fa-trash"></i></button>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <script type="form-template" data-formset-empty-form>
                            {% escapescript %}
                                <div data-formset-form>
                                    <div class="sr-only">
                                        {{ formset.empty_form.id }}
                                        {% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
                                        {% bootstrap_field formset.empty_form.ORDER form_group_class="" layout="inline" %}
                                    </div>
                                    <div class="row question-option-row">
                                        <div class="col-xs-10">
                                    <span class="text-muted">
                                        {% trans "New answer option" %}
                                    </span>
                                            {% bootstrap_field formset.empty_form.answer layout='inline' form_group_class="" %}
                                        </div>
                                        <div class="col-xs-2 text-right flip">
                                            <span>&nbsp;</span><br>
                                            <button type="button" class="btn btn-default" data-formset-move-up-button>
                                                <i class="fa fa-arrow-up"></i></button>
                                            <button type="button" class="btn btn-default" data-formset-move-down-button>
                                                <i class="fa fa-arrow-down"></i></button>
                                            <button type="button" class="btn btn-delete btn-danger" data-formset-delete-button>
                                                <i class="fa fa-trash"></i></button>
                                        </div>
                                    </div>
                                </div>
                            {% endescapescript %}
                        </script>
                        <p>
                            <button type="button" class="btn btn-default" data-formset-add>
                                <i class="fa fa-plus"></i> {% trans "Add a new option" %}</button>
                        </p>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>{% trans "Advanced" %}</legend>
                {% bootstrap_field form.help_text layout="control" %}
                {% bootstrap_field form.identifier layout="control" %}
                {% bootstrap_field form.ask_during_checkin layout="control" %}
                {% bootstrap_field form.hidden layout="control" %}
                {% bootstrap_field form.print_on_invoice layout="control" %}

                <div class="form-group">
                    <label class="col-md-3 control-label" for="id_dependency_question">
                        {% trans "Question dependency" %}
                        <br><span class="optional">{% trans "Optional" context "form" %}</span>
                    </label>
                    <div class="col-md-4">
                        {% bootstrap_field form.dependency_question layout="inline" form_group_class="inner" %}
                    </div>
                    <div class="col-md-5">
                        <script type="text/plain" id="dependency_value_val">{{ form.instance.dependency_values|escapejson_dumps }}</script>
                        {% bootstrap_field form.dependency_values layout="inline" form_group_class="inner" %}
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="form-group submit-group">
            <button type="submit" class="btn btn-primary btn-save">
                {% trans "Save" %}
            </button>
        </div>
    </form>
{% endblock %}
